<template>
    <view class="w-full overflow-y-scroll box-border" :style="{ height: foodHeight + 'px', paddingBottom: foodBottom + num + 'px' }">
        <view class="w-full flex items-start mb-2">
            <view class="w-1/3 width-33 h-80px relative overflow-hidden rounded-md">
                <!-- <text class="absolute left-0 top-0">必选</text> -->
                <view class="absolute left-0 top-0 z-1">
                    <!-- #ifdef H5 -->
                    <Vue3Lottie :animationData="newJSON" :height="50" :width="50" />
                    <!-- #endif -->
                </view>
                <image :lazy-load="true" class="w-full h-full"
                    src="https://p1.meituan.net/deal/e9996c39a0d58509d677b60a9eab131a53412.jpg@180w_164h_1e_1c"
                    mode="aspectFill"></image>
            </view>
            <view class="w-2/3 width-67 h-80px flex flex-wrap pl-2 pr-2 box-border content-between">
                <view class="w-full">
                    <text class="text-sm font-bold line-clamp-2">辣味鸡肉卷2次卡</text>
                    <text class="block text-xs text-gray-400">辣味鸡肉卷</text>
                </view>
                <view class="flex justify-between items-center w-full">
                    <view>
                        <text class="font-bold text-md text-red-500 mr-1">13</text>
                        <text class="text-xs text-gray-500">/元份</text>
                    </view>
                    <button type="submit" @click="handleSubmit"
                        class="group m0 relative text-xs flex w-50px justify-center rounded-2xl border-transparent bg-yellow-400 py-1 px-1 text-white hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:bg-yellow-400 focus:ring-offset-2">选规格</button>
                </view>
            </view>
        </view>
        <view class="w-full flex items-start mb-2">
            <view class="w-1/3 width-33 h-80px relative overflow-hidden rounded-md">
                <!-- <text class="absolute left-0 top-0">必选</text> -->
                <view class="absolute left-0 top-0 z-1">
                    <!-- #ifdef H5 -->
                    <Vue3Lottie :animationData="hotJSON" :height="50" :width="50" />
                    <!-- #endif -->
                </view>
                <image :lazy-load="true" class="w-full h-full"
                    src="https://p0.meituan.net/deal/11b28143b98c5b063edc13fa103c885e29455.jpg@180w_164h_1e_1c"
                    mode="aspectFill"></image>
            </view>
            <view class="w-2/3 width-67 h-80px flex flex-wrap pl-2 pr-2 box-border content-between">
                <view class="w-full">
                    <text class="text-sm font-bold line-clamp-2">双人手扒鸡套餐</text>
                    <text class="block text-xs text-gray-400">蜜汁手扒鸡+</text>
                </view>
                <view class="flex justify-between items-center w-full">
                    <view>
                        <text class="font-bold text-md text-red-500 mr-1">32</text>
                        <text class="text-xs text-gray-500">/元份</text>
                    </view>
                    <button type="submit" @click="handleSubmit"
                        class="group m0 relative text-xs flex w-50px justify-center rounded-2xl border-transparent bg-yellow-400 py-1 px-1 text-white hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:bg-yellow-400 focus:ring-offset-2">选规格</button>
                </view>
            </view>
        </view>
        <view class="w-full flex items-start mb-2">
            <view class="w-1/3 width-33 h-80px relative overflow-hidden rounded-md">
                <!-- <text class="absolute left-0 top-0">必选</text> -->
                <view class="absolute left-0 top-0 z-1">
                    <!-- #ifdef H5 -->
                    <Vue3Lottie :animationData="giftJSON" :height="50" :width="50" />
                    <!-- #endif -->
                </view>
                <image :lazy-load="true" class="w-full h-full"
                    src="https://p0.meituan.net/deal/d142173e5869bc3623889b2af198d9c233131.jpg@180w_164h_1e_1c"
                    mode="aspectFill"></image>
            </view>
            <view class="w-2/3 width-67 h-80px flex flex-wrap pl-2 pr-2 box-border content-between">
                <view class="w-full">
                    <text class="text-sm font-bold line-clamp-2">1个辣味鸡肉卷+1个牛气冲天堡+1份鸡米花+1份紫薯豌豆派+1份薯条+2杯中可</text>
                    <text class="block text-xs text-gray-400">麻辣鲜香 爽感过瘾</text>
                </view>
                <view class="flex justify-between items-center w-full">
                    <view>
                        <text class="font-bold text-md text-red-500 mr-1">32</text>
                        <text class="text-xs text-gray-500">/元份</text>
                    </view>
                    <button type="submit" @click="handleSubmit"
                        class="group m0 relative text-xs flex w-50px justify-center rounded-2xl border-transparent bg-yellow-400 py-1 px-1 text-white hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:bg-yellow-400 focus:ring-offset-2">选规格</button>
                </view>
            </view>
        </view>
        <view class="w-full flex items-start mb-2">
            <view class="w-1/3 width-33 h-80px relative overflow-hidden rounded-md">
                <!-- <text class="absolute left-0 top-0">必选</text> -->
                <image :lazy-load="true" class="w-full h-full"
                    src="https://p1.meituan.net/deal/1b3e896ae3ca22cc7f20c4325012f0d652210.jpg@180w_164h_1e_1c"
                    mode="aspectFill"></image>
            </view>
            <view class="w-2/3 width-67 h-80px flex flex-wrap pl-2 pr-2 box-border content-between">
                <view class="w-full">
                    <text class="text-sm font-bold line-clamp-2">经典重温 2-3 人餐</text>
                    <text class="block text-xs text-gray-400">经典重温</text>
                </view>
                <view class="flex justify-between items-center w-full">
                    <view>
                        <text class="font-bold text-md text-red-500 mr-1">29.99</text>
                        <text class="text-xs text-gray-500">/元份</text>
                    </view>
                    <button type="submit" @click="handleSubmit"
                        class="group m0 relative text-xs flex w-50px justify-center rounded-2xl border-transparent bg-yellow-400 py-1 px-1 text-white hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:bg-yellow-400 focus:ring-offset-2">选规格</button>
                </view>
            </view>
        </view>
        <view class="w-full flex items-start mb-2">
            <view class="w-1/3 width-33 h-80px relative overflow-hidden rounded-md">
                <!-- <text class="absolute left-0 top-0">必选</text> -->
                <image :lazy-load="true" class="w-full h-full"
                    src="https://p0.meituan.net/deal/ed75d05c3981baf8695173ae9f83013972409.jpg@180w_164h_1e_1c"
                    mode="aspectFill"></image>
            </view>
            <view class="w-2/3 width-67 h-80px flex flex-wrap pl-2 pr-2 box-border content-between">
                <view class="w-full">
                    <text class="text-sm font-bold line-clamp-2">单人新顾客实惠套餐</text>
                    <text class="block text-xs text-gray-400">实惠套餐 直呼过瘾</text>
                </view>
                <view class="flex justify-between items-center w-full">
                    <view>
                        <text class="font-bold text-md text-red-500 mr-1">20</text>
                        <text class="text-xs text-gray-500">/元份</text>
                    </view>
                    <button type="submit" @click="handleSubmit"
                        class="group m0 relative text-xs flex w-50px justify-center rounded-2xl border-transparent bg-yellow-400 py-1 px-1 text-white hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:bg-yellow-400 focus:ring-offset-2">选规格</button>
                </view>
            </view>
        </view>
        <view class="w-full flex items-start mb-2">
            <view class="w-1/3 width-33 h-80px relative overflow-hidden rounded-md">
                <!-- <text class="absolute left-0 top-0">必选</text> -->
                <image :lazy-load="true" class="w-full h-full"
                    src="https://p1.meituan.net/deal/aa29ab9e995a597cfe4540d9f4e64bd944258.jpg@180w_164h_1e_1c"
                    mode="aspectFill"></image>
            </view>
            <view class="w-2/3 width-67 h-80px flex flex-wrap pl-2 pr-2 box-border content-between">
                <view class="w-full">
                    <text class="text-sm font-bold line-clamp-2">家庭朋友聚餐分享多人餐</text>
                    <text class="block text-xs text-gray-400">聚餐秘宝</text>
                </view>
                <view class="flex justify-between items-center w-full">
                    <view>
                        <text class="font-bold text-md text-red-500 mr-1">55.6</text>
                        <text class="text-xs text-gray-500">/元份</text>
                    </view>
                    <button type="submit" @click="handleSubmit"
                        class="group m0 relative text-xs flex w-50px justify-center rounded-2xl border-transparent bg-yellow-400 py-1 px-1 text-white hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:bg-yellow-400 focus:ring-offset-2">选规格</button>
                </view>
            </view>
        </view>
        <view class="w-full flex items-start mb-2">
            <view class="w-1/3 width-33 h-80px relative overflow-hidden rounded-md">
                <!-- <text class="absolute left-0 top-0">必选</text> -->
                <image :lazy-load="true" class="w-full h-full"
                    src="https://p1.meituan.net/deal/1b3e896ae3ca22cc7f20c4325012f0d652210.jpg@180w_164h_1e_1c"
                    mode="aspectFill"></image>
            </view>
            <view class="w-2/3 width-67 h-80px flex flex-wrap pl-2 pr-2 box-border content-between">
                <view class="w-full">
                    <text class="text-sm font-bold line-clamp-2">经典重温 2-3 人餐</text>
                    <text class="block text-xs text-gray-400">经典重温</text>
                </view>
                <view class="flex justify-between items-center w-full">
                    <view>
                        <text class="font-bold text-md text-red-500 mr-1">29.99</text>
                        <text class="text-xs text-gray-500">/元份</text>
                    </view>
                    <button type="submit" @click="handleSubmit"
                        class="group m0 relative text-xs flex w-50px justify-center rounded-2xl border-transparent bg-yellow-400 py-1 px-1 text-white hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:bg-yellow-400 focus:ring-offset-2">选规格</button>
                </view>
            </view>
        </view>
        <view class="w-full flex items-start mb-2">
            <view class="w-1/3 width-33 h-80px relative overflow-hidden rounded-md">
                <!-- <text class="absolute left-0 top-0">必选</text> -->
                <image :lazy-load="true" class="w-full h-full"
                    src="https://p0.meituan.net/deal/ed75d05c3981baf8695173ae9f83013972409.jpg@180w_164h_1e_1c"
                    mode="aspectFill"></image>
            </view>
            <view class="w-2/3 width-67 h-80px flex flex-wrap pl-2 pr-2 box-border content-between">
                <view class="w-full">
                    <text class="text-sm font-bold line-clamp-2">单人新顾客实惠套餐</text>
                    <text class="block text-xs text-gray-400">实惠套餐 直呼过瘾</text>
                </view>
                <view class="flex justify-between items-center w-full">
                    <view>
                        <text class="font-bold text-md text-red-500 mr-1">20</text>
                        <text class="text-xs text-gray-500">/元份</text>
                    </view>
                    <button type="submit" @click="handleSubmit"
                        class="group m0 relative text-xs flex w-50px justify-center rounded-2xl border-transparent bg-yellow-400 py-1 px-1 text-white hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:bg-yellow-400 focus:ring-offset-2">选规格</button>
                </view>
            </view>
        </view>
        <view class="w-full flex items-start mb-2">
            <view class="w-1/3 width-33 h-80px relative overflow-hidden rounded-md">
                <!-- <text class="absolute left-0 top-0">必选</text> -->
                <image :lazy-load="true" class="w-full h-full"
                    src="https://p1.meituan.net/deal/aa29ab9e995a597cfe4540d9f4e64bd944258.jpg@180w_164h_1e_1c"
                    mode="aspectFill"></image>
            </view>
            <view class="w-2/3 width-67 h-80px flex flex-wrap pl-2 pr-2 box-border content-between">
                <view class="w-full">
                    <text class="text-sm font-bold line-clamp-2">家庭朋友聚餐分享多人餐</text>
                    <text class="block text-xs text-gray-400">聚餐秘宝</text>
                </view>
                <view class="flex justify-between items-center w-full">
                    <view>
                        <text class="font-bold text-md text-red-500 mr-1">55.6</text>
                        <text class="text-xs text-gray-500">/元份</text>
                    </view>
                    <button type="submit" @click="handleSubmit"
                        class="group m0 relative text-xs flex w-50px justify-center rounded-2xl border-transparent bg-yellow-400 py-1 px-1 text-white hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:bg-yellow-400 focus:ring-offset-2">选规格</button>
                </view>
            </view>
        </view>
        <view class="w-full text-center text-xs text-gray-300 mt-5">暂无更多</view>
    </view>
</template>

<script setup lang="ts">
import { Ref } from 'vue'
// #ifdef H5
import { Vue3Lottie } from 'vue3-lottie'
import 'vue3-lottie/dist/style.css'
import newJSON from '../static/json/new.json'
import hotJSON from '../static/json/hot.json'
import giftJSON from '../static/json/gift.json'
await new Promise((resolve) => {
    setTimeout(() => {
        resolve(true)
    }, 1000)
})
// #endif
let num: Ref = ref<number>(0)
// #ifdef MP-WEIXIN || APP-PLUS
num.value = 140
// #endif
const props = defineProps({
    foodHeight: {
        type: Number,
        default: 0
    },
    foodBottom: {
        type: Number,
        default: 0
    },
})
const emits = defineEmits(['open'])
const handleSubmit = () => {
    emits('open', true)
}
</script>

<style scoped>

</style>